<template>
  <div class="dashboard-editor-container">
    <a-page-header title="任务执行详情" sub-title="查看任务各元素的执行情况" @back="back()">
      <template slot="tags">
        <a-tag :color="taskInfo.status == 1?'green':'blue'">
          {{taskInfo.status == 1?'执行完毕':'执行中'}}
        </a-tag>
      </template>
      <template slot="extra">
        <a-button type="primary" @click="getDataList()">
          <i class="wshub wshub-shuaxin1"></i>
          刷新任务数据
        </a-button>
      </template>
      <a-row type="flex">
        <a-statistic title="任务元素" :value="taskInfo.num" />
        <a-statistic
          title="成功数"
          prefix=""
          :value="taskInfo.success"
          :style="{
            margin: '0 32px',
          }"
        />
        <a-statistic title="失败数" prefix="" :value="taskInfo.fail" />
      </a-row>
    </a-page-header>

    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="任务元素" name="item">
        <el-table
          :data="tableData"
          style="width: 100%"
        >
          <el-table-column
            prop="id"
            label="任务元素ID"
            width="100"
          >
          </el-table-column>
          <el-table-column
            prop="link"
            label="群链接"
            width="220"
          >
            <template slot-scope="scope">
          <span v-if="scope.row.link.indexOf('customize') != -1">
            自定义拉群账户
          </span>
              <span v-else>
            {{scope.row.link}}
          </span>
            </template>
          </el-table-column>
          <el-table-column
            prop="num"
            label="群人数/账户数"
            width="120"
          >
            <template slot-scope="scope">
          <span v-if="scope.row.num == 0 && scope.row.status == 0">
              待检测
          </span>
              <span v-else>
            {{scope.row.num}}
          </span>
            </template>
          </el-table-column>
          <el-table-column
            prop="status"
            :label="$t('v520.taskState')"
            width="130"
          >
            <template slot-scope="scope">
              <el-tag v-if="scope.row.status == 0"><i class="el-icon-loading"></i>执行中</el-tag>
              <el-tag v-if="scope.row.status == 1 && (scope.row.reason == '' || scope.row.reason == null)" type="success"><i class="el-icon-circle-check"></i>执行完毕</el-tag>
              <el-tag v-if="(scope.row.status == 1 || scope.row.status == 2) && (scope.row.reason != '' && scope.row.reason != null)" type="danger">执行失败</el-tag>
              <el-tag v-if="scope.row.status == 3"><i class="el-icon-loading"></i>正在初始检测中</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="reason"
            label="原因"
          >
          </el-table-column>
          <el-table-column
            prop="createtime"
            :label="$t('v520.createTime')"
            width="160"
          >
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="任务日志" name="log">
        <el-table
          :data="tableData2"
          style="width: 100%"
        >
          <el-table-column
            prop="execute_index"
            label="执行次数编号"
            width="120"
          >
          </el-table-column>
          <el-table-column
            prop="level"
            label="日志等级"
            width="120"
          >
            <template slot-scope="scope">
              <el-tag v-if="scope.row.level == 'info'" type="info">Info</el-tag>
              <el-tag v-if="scope.row.level == 'warn'" type="warning">Warn</el-tag>
              <el-tag v-if="scope.row.level == 'error'" type="danger">Err</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="opear"
            label="相关操作"
            width="120"
          >
            <template slot-scope="scope">
              <el-tag v-if="scope.row.opear == 'pre'" effect="plain">前置操作</el-tag>
              <el-tag v-if="scope.row.opear == 'create'" effect="plain">创群</el-tag>
              <el-tag v-if="scope.row.opear == 'pull'" effect="plain">分步拉人</el-tag>
              <el-tag v-if="scope.row.opear == 'invite'" type="info" effect="plain">创邀请码</el-tag>
              <el-tag v-if="scope.row.opear == 'avatar'" type="info" effect="plain">设置头像</el-tag>
              <el-tag v-if="scope.row.opear == 'description'" type="info" effect="plain">设置描述</el-tag>
              <el-tag v-if="scope.row.opear == 'set_admin'" type="success" effect="plain">设置管理</el-tag>
              <el-tag v-if="scope.row.opear == 'can_speak'" type="danger" effect="plain">设置禁言</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="content"
            label="反馈内容"
          >
          </el-table-column>
          <el-table-column
            prop="createtime"
            :label="$t('v520.createTime')"
            width="160"
          >
          </el-table-column>
        </el-table>
        <div style="width: 100%;text-align: right;padding-right: 20px;">
          <el-pagination
            background
            layout="prev, pager, next"
            :page-size="20"
            :current-page.sync="queryList2.page"
            :total="total2"
            @current-change="getDataList()"
          >
          </el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { getInfo,getLogList } from '@/api/wa_pull'

export default {
  name: 'wa_pull_info',
  created() {
    this.queryList.id = this.$route.params.id
    this.queryList2.task_id = this.$route.params.id
    if (!this.$route.params.id || this.$route.params.id == 0 || this.$route.params.id == undefined) {
      this.$notify.error({ title: this.$t('v520.reqFail'), message: '任务id为无效id' })
      this.$store.dispatch('tagsView/delView', this.$route)
      this.$router.go(-1)
    }
    this.getDataList()
  },
  data() {
    return {
      activeName:'item',
      total: 0,
      total2: 0,
      taskInfo:{

      },
      queryList: {
        id:0,
        limit: 999,
        page: 1
      },
      queryList2: {
        task_id:0,
        limit: 20,
        page: 1
      },
      tableData: [],
      tableData2:[]
    }
  },
  methods: {
    back(){
      this.$store.dispatch('tagsView/delView', this.$route)
      this.$router.go(-1)
    },
    getDataList() {
      const loading = this.$loading({
        lock: true,
        text: this.$t('v520.getting'),
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      if(this.activeName == 'item'){
        getInfo(this.queryList).then(res => {
          loading.close()
          this.tableData = res.data.rows
          this.total = res.data.total
          this.taskInfo = res.data.taskInfo;
        }).catch(e => {
          loading.close()
          this.$message.error('请求失败')
        })
      }else{
        getLogList(this.queryList2).then(res => {
          loading.close()
          this.tableData2 = res.data.rows
          this.total2 = res.data.total
        }).catch(e => {
          loading.close()
          this.$message.error('请求失败')
        })
      }
    },
    handleClick(act){
      console.log(act);
      this.getDataList();
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  background-color: #FFF;
  min-height: 100vh;
  padding: 20px 20px 0px;

  .pan-info-roles {
    font-size: 12px;
    font-weight: 700;
    color: #333;
    display: block;
  }

  .info-container {
    position: relative;
    margin-left: 190px;
    height: 150px;
    line-height: 200px;

    .display_name {
      font-size: 48px;
      line-height: 48px;
      color: #212121;
      position: absolute;
      top: 25px;
    }
  }
}
</style>
